<template>
	<el-dialog
		v-model="dialogVisible"
		:title="orderDetail.type == 1 && orderDetail.status == 3 ? '发货' : '处理售后'"
		width="90%"
		:before-close="handleClose"
		:destroy-on-close="true"
	>
		<div style="font-size: 14px; position: relative" v-loading="loading">
			<div style="display: flex">
				<div style="width: 49%">
					<el-descriptions title="售后信息" direction="vertical" size="small" :column="2" border style="margin-top: 20px">
						<el-descriptions-item label="售后类型" :span="1">
							<text class="catching"> {{ orderDetail.type == 0 ? '退货' : orderDetail.type == 1 ? '换货' : '仅退款' }}</text>
						</el-descriptions-item>
						<el-descriptions-item label="用户收货地址" v-if="orderDetail.type == 1">
							<text class="catching"> {{ orderDetail.userAddress }}</text>
						</el-descriptions-item>
						<el-descriptions-item label="退货金额（元）">
							<text class="catching">{{ (orderDetail.amount / 100).toFixed(2) }}</text>
						</el-descriptions-item>
						<el-descriptions-item label="退货原因"
							><div class="catching" style="max-width: 200px">{{ orderDetail.reason }}</div></el-descriptions-item
						>
						<el-descriptions-item label="退货照片">
							<div style="max-width: 100%; display: flex; flex-wrap: wrap" v-if="orderDetail.images && orderDetail.images.length > 0">
								<el-image
									class="image"
									:preview-src-list="orderDetail.images"
									:src="item"
									v-for="(item, index) in orderDetail.images"
									:key="index"
								></el-image>
							</div>
							<div v-else>-</div>
						</el-descriptions-item>
					</el-descriptions>
				</div>

				<div style="width: 49%; margin-left: 2%">
					<el-descriptions title="商品信息" direction="vertical" size="small" :column="3" border style="margin-top: 20px">
						<el-descriptions-item label="商品名称" span="3">{{ orderDetail.goodsName }}</el-descriptions-item>
						<el-descriptions-item label="sku名称">{{ orderDetail.skuName }}</el-descriptions-item>
						<el-descriptions-item label="购买数量">{{ orderDetail.skuNum }}</el-descriptions-item>
						<el-descriptions-item label="购买时价格">{{ orderDetail.skuPresentPrice }}</el-descriptions-item>
					</el-descriptions>
				</div>
			</div>

			<div style="display: flex">
				<div style="width: 49%">
					<el-descriptions title="订单信息" direction="vertical" size="small" :column="2" border style="margin-top: 20px">
						<el-descriptions-item label="订单号">{{ orderDetail.orderNo }}</el-descriptions-item>
						<el-descriptions-item label="下单时间">{{ orderDetail.orderTime }}</el-descriptions-item>
						<el-descriptions-item label="订单总金额">{{ orderDetail.goodsAmount }}</el-descriptions-item>
						<el-descriptions-item label="商家备注">{{ orderDetail.remark }}</el-descriptions-item>
					</el-descriptions>
				</div>
				<div style="width: 49%; margin-left: 2%">
					<el-descriptions title="收货信息" direction="vertical" size="small" :column="2" border style="margin-top: 20px">
						<el-descriptions-item label="收货人">{{ orderDetail.consigneeName }}</el-descriptions-item>
						<el-descriptions-item label="联系方式">{{ orderDetail.consigneePhone ? orderDetail.consigneePhone : '-' }}</el-descriptions-item>
						<el-descriptions-item label="地址">{{ orderDetail.consigneeAddress }}</el-descriptions-item>
					</el-descriptions>
				</div>
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-form :model="form" label-width="80px" :rules="rules" ref="formRef" label-position="top">
					<!-- 审批 -->
					<div v-if="orderDetail.status == 0">
						<el-form-item label="处理" prop="address">
							<el-radio-group v-model="form.status">
								<el-radio :label="1" size="large" border>同意</el-radio>
								<el-radio :label="2" size="large" border>拒绝</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="回收地址" prop="address" v-if="form.status == 1 && orderDetail.type != 2">
							<el-input v-model="form.address" placeholder="请输入回收地址" style="width: 100%"></el-input>
						</el-form-item>

						<el-form-item label="拒绝原因" prop="rejectReason" v-if="form.status == 2">
							<el-input v-model="form.rejectReason" placeholder="请输入拒绝原因" style="width: 100%"></el-input>
						</el-form-item>
					</div>

					<!-- 发货 -->
					<div v-else style="display: flex">
						<el-form-item label="快递公司：" prop="expressCode">
							<el-select v-model="form.expressCode" filterable placeholder="请选择快递公司" style="width: 250px" @change="expressChange">
								<el-option v-for="(item, index) in logisticsList" :label="item.name" :value="item.code" :key="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="单号：" prop="expressNo" style="margin-left: 30px">
							<el-input v-model="form.expressNo" placeholder="请输入单号" style="width: 350px"></el-input>
						</el-form-item>
					</div>
				</el-form>

				<el-button type="primary" @click="submit" style="margin-top: 20px">提交</el-button>
				<el-button @click="handleClose" style="margin-top: 20px">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus';
import { ref, watch, reactive } from 'vue';
import { getAfterSalesInfo, doAfterSalesHandle, doAftersalesConfirm, getLogisticsList, doAfterSalesReSend } from '/@/api/api';

const form = ref({
	status: 1,
});
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});

const rules = reactive({
	name: [{ required: true, message: '请输入商品名字', trigger: 'blur' }],
	categoryId: [{ required: true, message: '请选择商品类目', trigger: 'blur' }],
	serviceList: [{ required: true, message: '请选择服务标签', trigger: 'blur' }],
	weight: [{ required: true, message: '请输入权重', trigger: 'blur' }],
	freightId: [{ required: true, message: '请选择运费模板', trigger: 'blur' }],
	recommendation: [{ required: true, message: '请填写商品推荐语', trigger: 'blur' }],
});

const dialogVisible = ref(false);
const loading = ref(false);
watch(
	() => props.dialogVisible,
	async (val) => {
		dialogVisible.value = val;
		if (val) {
			getAfterSalesInfoFn();
			getLogisticsListFn();
		}
	}
);

// 切换快递公司时存下快递名称一起提交
function expressChange(code) {
	logisticsList.value.forEach((item, index) => {
		if (item.code == code) {
			form.value.expressName = item.name;
		}
	});
}

// 获取快递公司
const logisticsList = ref([]);
async function getLogisticsListFn() {
	const { code, data } = await getLogisticsList({});
	if (code === 200) {
		logisticsList.value = data.list;
	}
}

const orderDetail = ref({});
// 获取售后详情
async function getAfterSalesInfoFn() {
	loading.value = true;
	let { code, data } = await getAfterSalesInfo({
		id: props.row.id, // 售后id
		orderId: props.row.orderId,
	});
	loading.value = false;
	if (code == 200) {
		orderDetail.value = data.info;
	}
}

async function submit() {
	if (orderDetail.value.type == 2) {
		// 仅退款的确认
		confirm();
	} else if (orderDetail.value.type == 1 && orderDetail.value.status == 3) {
		// 换货时的重新发货
		doAfterSalesReSendFn();
	} else {
		// 退货或换货时的审批
		handleSubmit();
	}
}

// 用户选择换货时厂家收到货后的重新发货
async function doAfterSalesReSendFn() {
	let { code } = await doAfterSalesReSend({
		id: props.row.id, // 售后id
		...form.value,
	});

	if (code == 200) {
		ElMessage.success('处理成功');
		handleClose();
	}
}

// 退货和换货进这个方法
async function handleSubmit() {
	let { code } = await doAfterSalesHandle({
		id: props.row.id, // 售后id
		...form.value,
	});

	if (code == 200) {
		ElMessage.success('处理成功');
		handleClose();
	}
}

// 只有仅退款才会走这个方法
function confirm() {
	ElMessageBox.confirm('一旦确认收货货款将原路返回到用户账户，是否继续?', '提示', {
		confirmButtonText: '继续',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			let par = {
				id: orderDetail.value.id,
				orderId: orderDetail.value.orderId,
				status: form.value.status,
				reason: form.value.rejectReason,
			};

			doAftersalesConfirm(par).then((res) => {
				if (res.code == 200) {
					ElMessage.success('操作成功');
					handleClose();
				}
			});
		})
		.catch(() => {});
}

const emit = defineEmits(['handleClose']);

function handleClose() {
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}

.catching {
	font-weight: 600;
	color: rgb(23, 23, 23);
	font-size: 14px;
}

.image {
	width: 50px;
	height: 50px;
	margin-right: 20px;
}
</style>
